<template>
  <div class="search">
    <div class="searchInfo">
      <a-input class="search-item" v-model:value="query.domain" placeholder="域名" />
      <a-input class="search-item" v-model:value="query.httpFlag" placeholder="http协议" />
      <a-input class="search-item" v-model:value="query.httpsFlag" placeholder="https协议" />
      <a-input class="search-item" v-model:value="query.tslCert" placeholder="证书" />
      <a-select
          class="search-item"
          v-model:value="query.envId"
          allowClear
          placeholder="环境"
          :options="state.envIdData"
          :filter-option="false"
          :fieldNames="state.envIdFieldNames"
      ></a-select>
      <a-button type="primary" @click="search" class="search-btn">
        <template #icon><search-outlined /> </template>
      </a-button>
      <a-button type="primary" @click="reload">
        <template #icon><reload-outlined /> </template>
      </a-button>    </div>
    <a-button type="primary" @click="toAdd">
      <template #icon><plus-outlined /> </template>
    </a-button>
  </div>
  <a-table
      :dataSource="tableData.data"
      :columns="tableData.listColumns"
      :pagination="false"
      bordered
  >
    <template #bodyCell="{ column, index, record }">
      <template v-if="column.dataIndex === 'index'">
        {{ index + 1 }}
      </template>
            <template v-if="column.dataIndex === 'operation'">
        <a @click="toUpdate(record)">编辑</a>
        <a-popconfirm
            title="是否确定删除？"
            cancel-text="否"
            ok-text="是"
            @confirm="del(record)"
        >
          <a style="padding-left: 10px">删除</a>
        </a-popconfirm>
      </template>
    </template>
  </a-table>
  <a-pagination
      v-model:current="query.currentPage"
      :total="tableData.total"
      @change="pageChange"
      show-less-items
      :show-total="total => `共 ${total} 条`"
  />

<a-modal
      v-model:visible="addForm.visible"
      title="新增"
      okText="确定"
      cancelText="取消"
      width="30%"
      :maskClosable="false"
      centered
      @ok="add"
      @cancel="cancelAdd"
  >
    <a-form :model="addForm.data" name="addForm" ref="addFormRef" v-bind="formLayout">
      <a-form-item
        label="域名"
        name="domain"
        :rules="[{ required: true, message: '请选择域名' }, { message: '请输入正确的域名', pattern: /^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/ }]"
      >
        <a-input v-model:value="addForm.data.domain" />
      </a-form-item>
      <a-form-item
        label="http协议"
        name="httpFlag"
        :rules="[{ required: true, message: '请选择http协议' }]"
      >
        <a-switch
            v-model:checked="addForm.data.httpFlag"
            :checkedValue="1"
            :unCheckedValue="0"
        />
      </a-form-item>
      <a-form-item
        label="https协议"
        name="httpsFlag"
        :rules="[{ required: true, message: '请选择https协议' }]"
      >
        <a-switch
            v-model:checked="addForm.data.httpsFlag"
            :checkedValue="1"
            :unCheckedValue="0"
        />
      </a-form-item>
      <a-form-item
        v-if="addForm.data.httpsFlag ===1"
        label="证书"
        name="tslCert"
        :rules="[{ required: true, message: '请选择证书' }]"
      >
        <a-input v-model:value="addForm.data.tslCert" />
      </a-form-item>
      <a-form-item
        label="环境"
        name="envId"
        :rules="[{ required: true, message: '请选择环境' }]"
      >
        <a-select
            v-model:value="addForm.data.envId"
            :options="state.envIdData"
            :filter-option="false"
            :fieldNames="state.envIdFieldNames"
        ></a-select>
      </a-form-item>
    </a-form>
  </a-modal>
<a-modal
      v-model:visible="updateForm.visible"
      title="修改"
      okText="确定"
      cancelText="取消"
      width="30%"
      :maskClosable="false"
      centered
      @ok="update"
      @cancel="cancelUpdate"
  >
    <a-form :model="updateForm.data" name="updateForm" ref="updateFormRef" v-bind="formLayout">
      <a-form-item
        label="域名"
        name="domain"
        :rules="[{ required: true, message: '请输入域名' }]"
      >
        <a-input disabled v-model:value="updateForm.data.domain" />
      </a-form-item>
      <a-form-item
        label="http协议"
        name="httpFlag"
        :rules="[{ required: true, message: '请输入http协议' }]"
      >
        <a-switch
            v-model:checked="updateForm.data.httpFlag"
            :checkedValue="1"
            :unCheckedValue="0"
        />
      </a-form-item>
      <a-form-item
        label="https协议"
        name="httpsFlag"
        :rules="[{ required: true, message: '请输入https协议' }]"
      >
        <a-switch
            v-model:checked="updateForm.data.httpsFlag"
            :checkedValue="1"
            :unCheckedValue="0"
        />
      </a-form-item>
      <a-form-item
        v-if="updateForm.data.httpsFlag ===1"
        label="证书"
        name="tslCert"
        :rules="[{ required: true, message: '请输入证书' }]"
      >
        <a-input v-model:value="updateForm.data.tslCert" />
      </a-form-item>
      <a-form-item
        label="环境"
        name="envId"
        :rules="[{ required: true, message: '请选择环境' }]"
      >
        <a-select
        disabled
            v-model:value="updateForm.data.envId"
            :options="state.envIdData"
            :filter-option="false"
            :fieldNames="state.envIdFieldNames"
        ></a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts">
import { defineComponent } from "vue"
import { reactive, ref } from "@vue/reactivity"
import {
  PlusOutlined,
  ReloadOutlined,
  SearchOutlined,
} from "@ant-design/icons-vue"
import {
  domainConfigApi,
  envApi,
} from "@/api/devcloudApi"
import { message } from "ant-design-vue"
import {
  clearObject,
  clone,
  deleteKeyIgnore,
} from "@/util/utils"

export default defineComponent({
  name: "domainConfig",
  components: {
    ReloadOutlined,
    SearchOutlined,
    PlusOutlined,
  },
  setup() {
    const returnObj:any = {}

    const formLayout  = {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
    }

    // ------------ 查询条件 ------------------------
    const query:any = reactive({
      domain: '',
      httpFlag: '',
      httpsFlag: '',
      tslCert: '',
      envId: '',
      currentPage: 1,
      pageSize: 10,
    })

    const search = () => {
      query.currentPage = 1
      query.pageSize = 10
      list()
    }

    const initQuery = () => {
      query.domain = ''
      query.httpFlag = ''
      query.httpsFlag = ''
      query.tslCert = ''
      query.envId = ''
      query.currentPage = 1
      query.pageSize = 10
    }

    const reload = () => {
      initQuery()
      list()
    }

    returnObj.query = query
    returnObj.search = search
    returnObj.reload = reload

    // ------------ 添加弹框 ------------------------
    const addFormRef = ref()
    const addForm:any = reactive({
      visible: false,
      data: {
      },
    })

    const initAddForm = () => {
      addForm.data.httpFlag = 1
      addForm.data.httpsFlag = 0
    }

    const toAdd = async () => {
      initAddForm()
      addForm.visible = true
    }

    const cancelAdd = () => {
      addFormRef.value.resetFields()
      addForm.visible = false
    }

    const add = () => {
      addFormRef.value.validateFields().then(async () => {
        const res = await domainConfigApi.insert(addForm.data)
        if (res.success) {
          message.success("添加成功")
          reflush()
          cancelAdd()
        }
      }).catch((err: any)=>{
        console.log("出现异常", err);
      })
    }

    returnObj.addFormRef = addFormRef
    returnObj.addForm = addForm
    returnObj.toAdd = toAdd
    returnObj.cancelAdd = cancelAdd
    returnObj.add = add

    // ------------ 修改弹框 ------------------------
    const updateFormRef = ref()
    const updateForm:any = reactive({
      visible: false,
      data: {
      }
    })

    const initUpdateForm = (item: any) => {
      const obj = clone(item)
      deleteKeyIgnore(obj,
        "id",
        "domain",
        "httpFlag",
        "httpsFlag",
        "tslCert",
        "envId",
        "updateVersion",
      )
      updateForm.data = obj
    }

    const toUpdate = (item: any) => {
      initUpdateForm(item)
      updateForm.visible = true
    }

    const cancelUpdate = () => {
      updateFormRef.value.resetFields()
      updateForm.visible = false
    }

    const update = () => {
      updateFormRef.value.validateFields().then(async () => {
        const res = await domainConfigApi.update(updateForm.data)
        if (res.success) {
          message.success("更新成功")
          reflush()
          cancelUpdate()
        }
      })
    }

    returnObj.updateFormRef = updateFormRef
    returnObj.updateForm = updateForm
    returnObj.toUpdate = toUpdate
    returnObj.cancelUpdate = cancelUpdate
    returnObj.update = update


    // ------------ 表格 ------------------------
    const tableData = reactive({
      total: 0,
      data: [],
      listColumns: [
        {
          title: "序号",
          dataIndex: "index",
          align: "center",
          width: "50px",
        },
        {
          title: "域名",
          dataIndex: "domain",
          key: "domain",
          width: "100px",
          align: "center",
        },
        {
          title: "http协议",
          dataIndex: "httpFlagDesc",
          key: "httpFlagDesc",
          width: "100px",
          align: "center",
        },
        {
          title: "https协议",
          dataIndex: "httpsFlagDesc",
          key: "httpsFlagDesc",
          width: "100px",
          align: "center",
        },
        {
          title: "证书",
          dataIndex: "tslCert",
          key: "tslCert",
          width: "100px",
          align: "center",
        },
        {
          title: "环境",
          dataIndex: "envIdDesc",
          key: "envIdDesc",
          width: "100px",
          align: "center",
        },
        {
          title: "操作",
          dataIndex: "operation",
          width: "200px",
          align: "center",
        },
      ],
    })

    const pageChange = (page: number, pageSize: number) => {
      query.currentPage = page
      query.pageSize = pageSize
      list()
    }
    returnObj.pageChange = pageChange

    const list = async () => {
      clearObject(query)
      const res = await domainConfigApi.page(query)
      if (res.success) {
        tableData.data = res.result
        tableData.total = res.count
      }
    }

    const reflush = () => {
      initQuery()
      list()
    }


    const del = async (item: any) => {
      const res = await domainConfigApi.delete(item.id)
      if (res.success) {
        message.success("删除成功")
        reflush()
      }
    }


    returnObj.tableData = tableData
    returnObj.del = del

    const state = reactive({
      envIdData: [],
      envIdFieldNames: {
        value: "id",
        label: "env",
      },
    })

    // ------------查询------------------


    const envIdList = async () => {
      const param = {}
      const res = await envApi.list(param)
      if (res.success) {
        state.envIdData = res.result
      }
    }





    // --------------初始化--------------------------

    const initData = () => {
      envIdList()
      reflush()
    }

    initData()

    return {
      ...returnObj,
      formLayout,
      state,
    }
  },
})
</script>

<style lang="less" scoped>
.search {
  display: flex;
  justify-content: space-between;
  padding: 40px 90px 0 50px;
}
.ant-table-wrapper {
  margin: 40px;
}

.searchInfo {
  width: 80%;
  display: flex;

  .ant-input {
    width: 180px;
    margin: 0 10px;
  }
  .ant-select {
    width: 180px;
    margin: 0 10px;
  }
  .search-btn {
    margin: 0 10px;
  }
}
.ant-pagination {
  padding-top: 20px;
}
.ant-modal {
  .ant-input{
    width: 280px;
  }
  .ant-select {
    width: 280px;
  }
  .ant-picker{
    width: 200px;
  }
  .ant-input-number{
    width: 100px;
  }
}
</style>